<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"></meta>
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ApiDefController"
         class="page container"
         data-field="page"
         ng-cloak=""
         ng-show="pageState == 'loaded'">
      <div ng-include="'plugins/api-manager/html/api/api_bc.include'"></div>
      <!-- Entity Summary Row -->
      <div ng-include="'plugins/api-manager/html/api/api_entity.include'"></div>

      <!-- Navigation + Content Row -->
      <div class="row">
        <!-- Left hand nav -->
        <div ng-include="'plugins/api-manager/html/api/api_tabs.include'"></div>
        <!-- /Left hand nav -->

        <!-- Content -->
        <div class="col-md-10 apiman-entity-content">
          <div class="col-md-10">
            <div class="title"
                 apiman-i18n-key="api-def">API Definition</div>
            <div class="apiman-label-faded">
              <p apiman-i18n-key="api-def-explanation">
                Here you can (optionally) provide definition information about your API.  This
                information should take the form of a Swagger API definition file.  Adding a 
                definition file will allow consumers to better understand how to use your API.
                Simply copy/paste (or drag and drop!) your Swagger API definition into the text
                area below.
              </p>
            </div>
            <form ng-submit="saveApi()">
            <div>
              <span class="clearfix"
                    style="margin-top:10px; margin-bottom: 10px"
                    apiman-i18n-key="api-definition-label">API Definition:</span>
              <select apiman-i18n-key="api-def.choose-type" title="Choose a type..." apiman-select-picker="" ng-model="selectedDefinitionType" class="selectpicker" ng-disabled="isEntityDisabled()" ng-options="type.label for type in typeOptions track by type.value">
              </select>
              <textarea style="margin-top:10px; width: 100%;"
                        apiman-i18n-key="enter-api-definition"
                        id="api-definition"
                        placeholder="Copy/paste or drag and drop your API Definition in here!"
                        apiman-drop-text
                        ng-model="updatedApiDefinition"
                        ng-init="focus=false;blur=false;"
                        ng-class="{ myFocus: focus, myBlur: blur }"
                        ng-focus="focus=true;blur=false;"
                        ng-blur="blur=true;focus=false;"
                        data-field="data"
                        class="apiman-form-control form-control apiman-form-data"
                        ng-disabled="isEntityDisabled()"></textarea>
            </div>
            <div apiman-permission="apiEdit"
                 ng-show="!isEntityDisabled()"
                 class="actions definition"
                 style="margin-top: 20px">
              <button ng-disabled="!isDirty"
                      apiman-action-btn=""
                      type="submit"
                      class="btn btn-primary"
                      data-field="saveButton"
                      apiman-i18n-key="save"
                      placeholder="Saving..."
                      data-icon="fa-cog" >Save</button>
              <button ng-disabled="!isDirty"
                      ng-click="reset()"
                      class="btn btn-default"
                      data-field="cancelButton"
                      apiman-i18n-key="cancel">Cancel</button>
            </div>
            </form>
          </div>
        </div>
        <!-- /Content -->
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
